<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      table {
        text-align: center;
        border-collapse: collapse;
      }

      th,
      td {
        border: 1px solid #b7b7b7;
      }

      th {
        padding: 8px 20px;
        background-color: #f5f5f5;
      }

      td {
        padding: 8px;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>

    <script
      src="https://unpkg.com/react@18/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script src="./data.js"></script>
    <script src="./format.js"></script>

    <script type="text/babel">
      const root = ReactDOM.createRoot(document.querySelector('#root'))

      class App extends React.Component {
        constructor() {
          super()

          this.state = {
            books
          }
        }

        getPrice() {
          const totalPrice = books.reduce((prePrice, item) => {
            return prePrice + item.price * item.count
          }, 0)

          return totalPrice
        }

        changeCount(index, count) {
          const newBooks = [...this.state.books]
          newBooks[index].count += count
          this.setState({ books: newBooks })
        }

        itemDelete(index) {
          const newBooks = [...this.state.books]
          newBooks.splice(index, 1)
          this.setState({ books: newBooks })
        }

        renderBooksList() {
          const { books } = this.state

          return (
            <div>
              <table>
                <thead>
                  <tr>
                    <th>序号</th>
                    <th>书籍名称</th>
                    <th>出版日期</th>
                    <th>价格</th>
                    <th>购买数量</th>
                    <th>操作</th>
                  </tr>
                </thead>

                <tbody>
                  {books.map((item, index) => {
                    return (
                      <tr key={item.id}>
                        <td>{index}</td>
                        <td>{item.name}</td>
                        <td>{item.date}</td>
                        <td>{formatPrice(item.price)}</td>
                        <td>
                          <button
                            disabled={item.count <= 1}
                            onClick={() => this.changeCount(index, -1)}
                          >
                            -
                          </button>
                          {item.count}
                          <button onClick={() => this.changeCount(index, 1)}>
                            +
                          </button>
                        </td>
                        <td>
                          <button onClick={() => this.itemDelete(index)}>
                            删除
                          </button>
                        </td>
                      </tr>
                    )
                  })}
                </tbody>
              </table>
              <h2>总价格: {formatPrice(this.getPrice())}</h2>
            </div>
          )
        }

        renderBookEmpty() {
          return (
            <div>
              <h2>请添加书籍~</h2>
            </div>
          )
        }

        render() {
          const { books } = this.state

          return books.length ? this.renderBooksList() : this.renderBookEmpty()
        }
      }

      root.render(<App />)
    </script>
  </body>
</html>
